<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布-飞机</title>
</head>
<body onload="draw('myCanvas')" >
<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>

<script type="text/javascript">

    function draw(id) {
        var canvas=document.getElementById(id);
        if(canvas==null)
            return false;
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(65,50);
        ctx.lineTo(156,70);
        ctx.lineTo(190,38);
        ctx.bezierCurveTo(222,10,250,40,230,70);
        ctx.lineTo(195,106);
        ctx.lineTo(218,204);
        ctx.lineTo(186,228);
        ctx.lineTo(150,146);
        ctx.lineTo(110,186);
        ctx.bezierCurveTo(118,200,126,220,98,234);
        ctx.lineTo(30,162);
        ctx.bezierCurveTo(30,134,70,140,78,152);
        ctx.lineTo(118,114);
        ctx.lineTo(40,78);
        ctx.lineTo(65,50);
        /*ctx.bezierCurveTo(75,37,70,25,50,25);
        ctx.bezierCurveTo(20,25,22,62.5,22,55);
        ctx.bezierCurveTo(20,80,40,102,75,120);
        ctx.bezierCurveTo(110,102,130,80,128,55);
        ctx.bezierCurveTo(128,55,130,25,100,25);
        ctx.bezierCurveTo(85,25,75,37,75,40);*/

        var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
        gradient.addColorStop(0,"rgba(244,28,285,0.1)");
        gradient.addColorStop(1,"rgba(255,255,255,1)");

        ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
        ctx.stroke();

        ctx.fillStyle=gradient;
        ctx.fill();
    }
</script>
</body>
</html>